<template>
    <div class="main_bottom">
      <div class="bottom_content">
        <div class="bottom_level">
          <span style="padding-left: 20px;width:120px">{{ enum_role[userInfoStore.userType] }}</span>
          <!-- <span style="width:50px">版本:</span> -->
          <!-- <span style="width:120px">{{projectVersion}}</span> -->
          <!-- <el-input v-model="level" disabled></el-input> -->
          <!-- <el-select v-model="reg.level" class="level_item" disabled>
            <el-option
              :label="item.name"
              :value="item.type"
              v-for="item in levelList"
              :key="item.type"
            ></el-option>
          </el-select> -->
        </div>
<!--        <div class="bottom_level">-->
<!--          <div class="bottom_text">门状态：</div>-->
<!--          <div class="bottom_status" :style="{background:door?'#50EF6C':'rgb(242, 53, 65)'}"></div>-->
<!--        </div>-->
        <!-- <div class="bottom_level" style="position: relative;flex: 2;" >
          <div class="bottom_text">自动模式开关：</div>
          <el-switch disabled></el-switch>
        </div> -->
        <!-- <div class="bottom_level">
          <div class="bottom_item">工作任务流</div>
        </div> -->
        <!-- <div class="bottom_level">
          <div class="bottom_text"  style="text-align: center;width: 100%;">主机名：{{ hostname }}</div>

        </div> -->
        <!-- <div class="bottom_level" style="border-left: 1px solid #C4CFDF">
          <div class="bottom_text"  style="text-align: center;width: 100%;">IP地址：{{ip}}</div>
        </div> -->
        <!-- <div class="bottom_level"  style="border-left: 1px solid #C4CFDF">
          <div class="bottom_text" style="text-align: center;width: 100%;">软件启动时长：{{ runTime }}</div>
        </div> -->
        <div class="bottom_level" style="position: relative;flex: 12;" >
          <div class="bottom_text" style="text-align: right;width: 100%;padding-right: 0px;">当前时间：{{ nowTimes }}</div>
          <!-- <div class="bottom_edit"><img src='../../assets/ic_bottom_edit.png'></div> -->
        </div>
      </div>
    </div>

</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import os from 'os'
import { styleText } from 'util';

import {ENUM_ROLE} from '../../utils/const.js';
import { mapState } from 'vuex';
	export default {
		name: 'BoneDen',

		data() {
			return {
        projectVersion:'0.0.0',
        Level:'',
        enum_role: ENUM_ROLE,
        hostname:'',
        nowTimes:'',
        runTime:'',
        door:false,
        // qtcall:null,
        ip:'',
        timer:null,
        intervalIds:null,
        levelList: [
          {
            type: 1,
            name:'Level1'
          },
          {
            type: 2,
            name:'Level2'
          },
        ]


			}
		},
    computed: {
    ...mapState(['userInfoStore']),
    },
    created() {

    },
		mounted() {
      const packageData = require('../../../package.json')
      this.projectVersion = packageData.version
      let that = this
      // if (process.env.NODE_ENV === 'production') {
      //   setTimeout(() => {
      //     new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
      //       this.qtCall = channel.objects.webBridge;
      //
      //       this.qtCall.QtToJs.connect((func,json) => {
      //         if(func==="RefreshDoorStatus"){
      //           const datas = JSON.parse(json)
      //           console.log(datas)
      //           if (datas.code === 200) {
      //             console.log("door: ", datas)
      //             that.door= datas.data.Door
      //             console.log(that.door)
      //           }
      //         }
      //       })
      //     });
      //   }, 420);
      // }


      const username = os.hostname()

      let lastDate = ''
      this.Level = this.enum_role[this.userInfoStore.userType]
      if(localStorage.getItem('lastDate')){
        lastDate = localStorage.getItem('lastDate')
      }else{
        lastDate = new Date()
        localStorage.setItem('lastDate',lastDate)
      }
      this.intervalIds = setInterval(function(){
        const date = new Date();
        let yy = new Date(date).getFullYear().toString();
        let mm = new Date(date).getMonth() + 1;
        let dd = new Date(date).getDate();
        let hh = new Date(date).getHours();
        let mf = new Date(date).getMinutes();
        let ss = new Date(date).getSeconds();
        mm = mm < 10 ? '0' + mm.toString() : mm.toString();
        dd = dd < 10 ? '0' + dd.toString() : dd.toString();
        hh = hh < 10 ? '0' + hh.toString() : hh.toString();
        mf = mf < 10 ? '0' + mf.toString() : mf.toString();
        ss = ss < 10 ? '0' + ss.toString() : ss.toString();
        that.runTime =  that.getDuration(lastDate);
        that.nowTimes = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
      }, 1000);

      // fetch('https://api.ipify.org?format=json')
      //   .then(response => response.json())
      //   .then(json => this.ip = json.ip);



},
		methods: {

      getDuration(startTime) {
        const endTime = new Date(); // 当前时间
        const duration = endTime.getTime() - new Date(startTime).getTime(); // 计算时长

        // 将毫秒转换为秒
        const seconds = Math.floor((duration / 1000) % 60);
        const minutes = Math.floor((duration / 1000 / 60) % 60);
        const hours = Math.floor(duration / 1000 / 60 / 60);

        // 返回格式化的时间字符串
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .main_bottom{
    display: flex;

    width: 100%;
    height: 55px;
    justify-content: center;
    align-items: center;
    .bottom_content{
      width: 100%;
      height: 35px;
      padding: 0 15px;
      flex-direction: row;
      display: flex;
      .bottom_level{
        display: flex;
        flex: 1;
        height: 35px;
        align-items: center;
        .bottom_item{
          width: 130px;
          height: 30px;
          background: #C4CFDF;
          border-radius: 15px;
          text-align: center;
          line-height: 30px;
          margin-top: 2px;
          font-size: 14px;
          color: #2A2A2A;
        }
        .bottom_edit{
          width: 18px;
          height: 18px;
          position: absolute;
          right: 20px;
          top: 8px;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;

          }
        }
        .bottom_text{
          font-size: 14px;
          color: #2A2A2A;
        }
        .bottom_status{
          margin-left: 5px;
          width: 20px;
          height: 20px;
          border-radius: 20px;
        }
        /deep/ .el-select{
          width: 140px;
          height: 100%;
          background-color: #F0F3F8;
        }
        /deep/ .el-select__wrapper{
          max-height: 35px;
          background-color: #F0F3F8;
        }
        /deep/ .el-select__wrapper{
          background-size: 8px 5px;
          background-position: right;
        }
        /deep/ .el-input {
          background-color: #F0F3F8;
          height: 35px;
        }
        /deep/ .el-input__inner {
          background-color: #F0F3F8;
          height: 35px;
        }
        /deep/ .el-input__icon {
          line-height: 35px;
      }
      }
    }
  }
</style>
